<template>
  <div id="moudle">
    <div v-show="!adminMoudle">
      <el-button type="primary" size="default" @click="opendlg()" icon="CirclePlus"
        style="margin-left: 8px;">添加分类</el-button>
      <el-button v-show="!father" type="info" size="default" icon="Back" @click="f_back()">返回</el-button>
      <div class="release_table">
        <el-table :data="tableData" border stripe style="width:100%" v-show="father">
          <el-table-column align="center" type="index" label="序号" width="60" />
          <el-table-column label="模板类型" width="220">
            <template #default="scope">
              <div style="cursor: pointer;" @click="childNode(scope.row)" class="mbhover"> {{ scope.row.name }} </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div>
                <el-button type="primary" size="default" icon="Grid" @click="updMoudle(scope.row)">修改</el-button>
                <el-button type="danger" size="default" icon="DeleteFilled" @click="delMoudle(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column></el-table-column> -->
        </el-table>
        <el-table :data="childtableData" border stripe style="width: 100%" v-show="!father">
          <el-table-column align="center" type="index" label="序号" width="60" />
          <el-table-column label="模板名称" width="220">
            <template #default="scope">
              <div style="cursor: pointer;" @click="getChild(scope.row)" class="mbhover">{{ scope.row.name }}</div>
              <!-- <img :src="scope.row.online == 1 ? '/img/zx_ico.png' : '/img/zx_icol.png'" alt=""> -->
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div>
                <el-button type="primary" size="default" icon="Grid" @click="updMoudle(scope.row)">修改</el-button>
                <el-button type="danger" size="default" icon="DeleteFilled" @click="delMoudle(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column></el-table-column> -->
        </el-table>
      </div>
    </div>
    <!-- getChild(scope.row) -->
    <div v-show="adminMoudle">
      <div style="display: flex;justify-content: space-between;align-items: center;padding-left: 8px;">
        <!-- <div style="color: white;">模板分类设置</div> -->
        <div>
          <el-button type="primary" icon="Plus" @click="openTemp()" size="default">添加内容</el-button>
          <el-button @click="switchadmin()" icon="ArrowLeft" size="default" type="info">返回</el-button>
        </div>
      </div>
   
        <div class="release_table">
          <el-table :data="childList" border stripe height="700" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="100" />
            <el-table-column label="发布内容">
              <template #default="scope">
                <div>{{ scope.row.content }}</div>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="240">
              <template #default="scope">
                <div>{{ scope.row.gmt_create }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template #default="scope">
                <div>
                  <el-button type="primary" size="default" icon="Grid" @click="updChildTemp(scope.row)">修改</el-button>
                  <el-button type="danger" size="default" icon="DeleteFilled"
                    @click="delChildTemp(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>
      
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <div class="node_temp">
        <el-form :model="moudleobj" label-width="auto" style="max-width: 600px">
          <el-form-item label="模板节点名称:">
            <el-input v-model="moudleobj.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" type="info">取消</el-button>
          <el-button type="primary" @click="sureadd()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="TempVisible" :title="TempTitle" width="800" align-center>
      <div class="temp">
        <el-form :inline="true" :model="Tempobj" label-width="160">
          <div class="mblock">
            <el-form-item label="发布内容">
              <el-input v-model="Tempobj.content" type="textarea" placeholder="请输入发布内容" />
            </el-form-item>
          </div>
          <el-form-item label="滞留时间">
            <el-input v-model="Tempobj.delay_time" />
          </el-form-item>
          <el-form-item label="宽">
            <el-input v-model="Tempobj.width" />
          </el-form-item>
          <el-form-item label="高">
            <el-input v-model="Tempobj.height" />
          </el-form-item>
          <el-form-item label="出字速度">
            <el-input v-model="Tempobj.speed" />
          </el-form-item>
          <el-form-item label="情报板型号">
            <el-select v-model="Tempobj.type" placeholder="请选择设备型号">
              <el-option v-for="item in ModelList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="对齐方式">
            <el-select v-model="Tempobj.align" placeholder="请选择对齐方式">
              <el-option v-for="item in alignList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="播放方式">
            <el-select v-model="Tempobj.transition" placeholder="请选择播放方式">
              <el-option v-for="item in TransitionList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="字体">
            <el-select v-model="Tempobj.font" placeholder="请选择字体">
              <el-option v-for="item in FontList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-select v-model="Tempobj.font_size" placeholder="请选择字体大小">
              <el-option v-for="item in FontSizeList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-select v-model="Tempobj.font_color" placeholder="请选择字体颜色">
              <el-option v-for="item in FontColorList" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="命令类型">
            <el-select v-model="Tempobj.message_type" placeholder="请选择命令类型">
              <el-option v-for="item in TypeList" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="padding-left: 10px;font-size: 20px;margin-bottom: 10px;color: white;">
          预览:
        </div>
        <div class="preview-f"
          :style="{ width: Number(Tempobj.width) * 2 + 'px', height: Number(Tempobj.height) * 2 + 'px', justifyContent: formatAlign(Tempobj.align) }">
          <div class="preview" :style="{
            color: formatColor(Tempobj.font_color),
            fontSize: formatSize(Tempobj.font_size)
          }" v-html="Tempobj.content.replaceAll(/\n/g, '<br>')">
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="TempVisible = false" type="info">取消</el-button>
          <el-button type="primary" @click="includeStr()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import $sys from "../../api/sys";
import { he } from 'element-plus/es/locales.mjs';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const moudleobj = reactive({});
const Tempobj = ref({
  content: '',
  align: 'center',
  transition: '2',
  font: 's',
  width: 384,
  height: 32,
  font_size: '1616',
  font_color: '000255000000',
  message_type: 0
});
const adminMoudle = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref('添加模板节点');
const TempVisible = ref(false);
const TempTitle = ref('添加模板');
onMounted(() => {
  getTempTreeList();
  //厂家列表
  getDeviceFactory();
  // 型号列表
  getModelList();
  //对齐方式列表
  getalignList();
  //播放方式列表
  getTransitionList();
  //字体列表
  getTypeList();
  //字体大小列表
  getFontSizeList();
  //字体颜色列表
  getFontColorList();
  getSenstiveList();
})
const father = ref(true);
const fatherID = ref('')
const son = ref(false);
const childtableData = ref([]);
const TypeList = ref([
  {
    name: '一般类',
    value: 0
  },
  {
    name: '警示类',
    value: 1
  },
  {
    name: '宣传类',
    value: 2
  }
]);
function f_back() {
  fatherID.value = '';
  father.value = true;
}
function childNode(e) {
  if (e.parent_id == 0) {
    father.value = false;
    fatherID.value = e.id;
    childtableData.value = e.children;
  }
}
function openTemp() {
  TempTitle.value = '添加模板';
  InitTempForm();
  TempVisible.value = true;
}
const SenstiveList = ref([])
function getSenstiveList() {
  $sys.getSenstiveList().then(res => {
    if (res.code == 200) {
      SenstiveList.value = [];
      res.data.forEach((item, index) => {
        SenstiveList.value.push(item.value);
      })
    }
  })
}
function forbiddenStr(str) {
  var re = '';
  for (var i = 0; i < SenstiveList.value.length; i++) {
    if (i == SenstiveList.value.length - 1)
      re += SenstiveList.value[i];
    else
      re += SenstiveList.value[i] + "|";
  }
  var pattern = new RegExp(re, "g");
  if (pattern.test(str)) {
    return false;
  } else {
    return true;
  }
}
function includeStr(content){
    let obj={};
    obj.content=Tempobj.value.content;
    let flag=true;
    $sys.include(obj).then(res=>{
        if(res.data.length>0){
            let str='';
            res.data.forEach((item,index)=>{
                str+=item.value+'，';
            })
            ElMessage({
                message:`当前信息包含敏感词：${str}请及时修改！`,
                type:'warning'
            })
            return;
        }else{
          sureTemp();
        }
    })
}
function sureTemp() {
  if (checkTempForm()) {
    console.log(Tempobj.value);
    ElMessageBox.confirm(
      `确定${TempTitle.value}吗?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      if (TempTitle.value == '添加模板') {
        $sys.addtemplate(Tempobj.value).then(res => {
          if (res.code == 200) {
            ElMessage({
              message: '添加成功',
              type: 'success'
            });
            let obj = {};
            obj.id = Tempobj.value.node_id
            getChild(obj);
            TempVisible.value = false;
          }
        })
      } else {
        $sys.updChildTemp(Tempobj.value).then(res => {
          if (res.code == 200) {
            ElMessage({
              message: '修改成功',
              type: 'success'
            });
            let obj = {};
            obj.id = Tempid.value;
            getChild(obj);
            TempVisible.value = false;
          }
        })
      }
    })
  }
}
function delChildTemp(e) {
  ElMessageBox.confirm(
    `确定删除吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    $sys.delChildTemp(e.id).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '删除成功',
          type: 'success'
        });
        let obj = {};
        obj.id = Tempid.value;
        getChild(obj);
      }
    })
  })
}
function updChildTemp(e) {
  $sys.getChildtempByID(e.id).then(res => {
    if (res.code == 200) {
      TempTitle.value = '修改模板';
      Tempobj.value.id = e.id;
      Tempobj.value.content = res.data.content;
      Tempobj.value.align = res.data.align.value;
      Tempobj.value.font = res.data.font.value;
      Tempobj.value.font_color = res.data.font_color.value;
      Tempobj.value.font_size = res.data.font_size.value;
      Tempobj.value.height = res.data.height;
      Tempobj.value.width = res.data.width;
      Tempobj.value.transition = res.data.transition.value;
      Tempobj.value.speed = res.data.speed;
      Tempobj.value.delay_time = res.data.delay_time;
      Tempobj.value.type = res.data.type.value;
      Tempobj.value.message_type = res.data.messgae_type;
      TempVisible.value = true;
    }
  })
}
function checkTempForm() {
  let flag = true;
  if (!Tempobj.value.content || Tempobj.value.content == '') {
    ElMessage({
      message: '请填写发布内容',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.delay_time || Tempobj.value.delay_time == '') {
    ElMessage({
      message: '请填写停留时间',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.width || Tempobj.value.width == '') {
    ElMessage({
      message: '请填写宽度',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.height || Tempobj.value.height == '') {
    ElMessage({
      message: '请填写高度',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.align || Tempobj.value.align == '') {
    ElMessage({
      message: '请选择对齐方式',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.transition || Tempobj.value.transition == '') {
    ElMessage({
      message: '请选择播放方式',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.font || Tempobj.value.font == '') {
    ElMessage({
      message: '请选择字体',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.font || Tempobj.value.font == '') {
    ElMessage({
      message: '请选择字体',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.font_size || Tempobj.value.font_size == '') {
    ElMessage({
      message: '请选择字体大小',
      type: 'warning'
    });
    flag = false;
  } else if (!Tempobj.value.font_color || Tempobj.value.font_color == '') {
    ElMessage({
      message: '请选择字体颜色',
      type: 'warning'
    });
    flag = false;
  }
  return flag;
}
function InitTempForm() {
  for (let key in Tempobj.value) {
    Tempobj.value[key] = '';
    Tempobj.value['align'] = 'center';
    Tempobj.value['transition'] = '1';
    Tempobj.value['font'] = 's';
    Tempobj.value['width'] = 128;
    Tempobj.value['height'] = 64;
    Tempobj.value['font_size'] = '1616';
    Tempobj.value['font_color'] = '000255000000';
    Tempobj.value['speed'] = '5';
    Tempobj.value['delay_time'] = '5';
    Tempobj.value['type'] = 'f';
    Tempobj.value['message_type'] = 0;
  }
  Tempobj.value.node_id = Tempid.value;
}
function formatColor(string) {
  const r = string.substring(0, 3); // 红色
  const g = string.substring(3, 6); // 绿色
  const b = string.substring(6, 9); // 蓝色
  const a = string.substring(9, 12); // Alpha
  return `rgba(${r},${g},${b},1)`;
}
function formatSize(size) {
    let m_size = '';
    let o_size = Number(size.substr(0, 2));
    m_size = o_size * 2;

    return m_size + 'px';
}
function formatAlign(align) {
  let flex = '';
  if (align == 'left') {
    flex = 'flex-start'
  } else if (align == 'right') {
    flex = 'flex-end'
  } else if (align == 'center') {
    flex = 'center'
  }
  return flex;
}
const speedList = ref([
  {
    value: 1,
    label: '1'
  },
  {
    value: 2,
    label: '2'
  },
  {
    value: 3,
    label: '3'
  },
  {
    value: 4,
    label: '4'
  },
  {
    value: 5,
    label: '5'
  }
])
const FactoryList = ref([]);
function getDeviceFactory() {
  $sys.getDeviceFactory().then(res => {
    if (res.code == 200) {
      FactoryList.value = res.data;
    }
  })
}
const ModelList = ref([]);
function getModelList() {
  $sys.getDeviceModel().then(res => {
    if (res.code == 200) {
      ModelList.value = res.data;
    }
  })
}
const alignList = ref([]);
function getalignList() {
  $sys.getDeviceAlign().then(res => {
    if (res.code == 200) {
      alignList.value = res.data;
    }
  })
}
const TransitionList = ref([]);
function getTransitionList() {
  $sys.getDeviceTransition().then(res => {
    if (res.code == 200) {
      TransitionList.value = res.data;
    }
  })
}
const FontList = ref([]);
function getTypeList() {
  $sys.getInfoBoardFont().then(res => {
    if (res.code == 200) {
      FontList.value = res.data;
    }
  })
}
const FontSizeList = ref([]);
function getFontSizeList() {
  $sys.getInfoBoardFontSize().then(res => {
    if (res.code == 200) {
      FontSizeList.value = res.data;
    }
  })
}
const FontColorList = ref([]);
function getFontColorList() {
  $sys.getInfoBoardFontColor().then(res => {
    if (res.code == 200) {
      FontColorList.value = res.data;
    }
  })
}
function updMoudle(e) {
  dialogTitle.value = '编辑模板节点';
  $sys.getTempByID(e.id).then(res => {
    if (res.code == 200) {
      moudleobj.id = res.data.id;
      moudleobj.name = res.data.name;
      dialogVisible.value = true;
    }
  })
}
function delMoudle(e) {
  //先判定是否存在子集

  $sys.getChildList(e.id).then(res => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        ElMessage({
          message: '存在下级，不能删除！',
          type: 'success'
        })
      }
      else {
        ElMessageBox.confirm(
          `是否确定？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          $sys.delTemp(e.id).then(res => {
            if (res.code == 200) {
              ElMessage({
                message: '删除成功！',
                type: 'success'
              })
              getTempTreeList();
            } else {
              ElMessage({
                message: res.message,
                type: 'warning'
              })
            }
          })
        })
      }
    } else {

    }
  })



}
function getTempTreeList() {
  $sys.getTempTree().then(res => {
    if (res.code == 200) {
      tableData.value = res.data;
      if (father.value == false) {
        res.data.forEach((item, index) => {
          if (item.id == fatherID.value) {
            childtableData.value = item.children;
          }
        })
      }
    }
  })
}
function sureadd() {
  if (moudleobj.name == '' || !moudleobj.name) {
    ElMessage({
      message: '模板节点名称不能为空!',
      type: 'warning'
    })
  } else {
    if (dialogTitle.value == '添加模板节点') {
      $sys.TempAdd(moudleobj).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '添加成功!',
            type: 'success'
          })
          dialogVisible.value = false;

          getTempTreeList();

        }
      })
    } else {
      $sys.updTemp(moudleobj).then(res => {
        if (res.code == 200) {
          ElMessage({
            message: '修改成功!',
            type: 'success'
          })
          dialogVisible.value = false;
          getTempTreeList();
        }
      })
    }
  }
}
function opendlg() {
  moudleobj.parent_id = fatherID;
  dialogTitle.value = '添加模板节点';
  moudleobj.name = '';
  dialogVisible.value = true;
}
const tableData = ref([
  {
    id: 1,
    online: 1,
    type: 1,
    name: '主线K471+900上行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 2,
    online: 0,
    type: 0,
    name: '主线K471+900下行',
    content: '情报板内容',
    user: 'xxx',
    state: 0,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 3,
    online: 1,
    type: 1,
    name: '主线K472+900上行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 4,
    online: 1,
    type: 1,
    name: '主线K472+900下行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  }
])
function switchadmin() {
  adminMoudle.value = !adminMoudle.value;
}
const childList = ref([]);
const Tempid = ref('');
function getChild(e) {
  Tempid.value = e.id;
  adminMoudle.value = true;
  $sys.getChildList(e.id).then(res => {
    if (res.code == 200) {
      childList.value = res.data;
    }
  })
}
</script>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.release_table {
  padding: 5px;
  background-color: #2F4052;
  /* height: 700px; */
  /* overflow: auto; */
  width: 100%;
}

.release_table::-webkit-scrollbar {
  width: 5px;
}

.release_table::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.release_table::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}

:deep(*) {
  font-size: 16px;
}

.preview {
  white-space: nowrap;
}

.preview-f {
  width: 90%;
  height: 200px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  background-color: black;
  font-weight: bold;
  overflow-y: auto;
}

.preview-f::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.preview-f::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.preview-f::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}

:deep(.el-form-item__label) {
  color: white;
}

#moudle {

  padding: 10px;
  background-color: #2F4052;
  height: 100%;
}

:deep(.el-dialog) {
  background-color: #2F4052;
}

:deep(.el-dialog__title) {
  color: white;
}

.temp {}

:deep(.temp .el-input) {
  width: 150px !important;
}

:deep(.temp .el-select) {
  width: 150px !important;
}

:deep(.el-textarea__inner) {
  height: 100px !important;
  width: 488px;
}

:deep(.mblock .el-input) {
  width: 410px !important;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
  background-color: #34475b !important;
  border: 1px solid #2b3b4b !important;
  box-shadow: none !important;

}

:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder) {
  color: #ccc !important;
}
</style>

<style lang='less'>
.el-message-box {
  background-color: #2f4052 !important;
}

.el-message-box__message,
.el-message-box__title {
  color: #fff;

}

#moudle {
  .mbhover:hover {
    color: #1b95f8 !important;
    text-decoration: underline;
  }

  .el-table--fit {
    height: calc(100vh - 200px);
    background: #304053;
    border-bottom: 1px #263342 solid;
  }

  .el-button>span {
    font-size: 14px;
  }



  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: none;
  }

  .el-table__inner-wrapper {
    &::before {
      display: none;
    }
  }

  // 头部样式
  .el-table__header-wrapper th {
    background-color: #2F4052;
    color: #fff;
  }

  // 内容行样色
  .el-table__row {
    background-color: #2F4052;
    color: #B2C9EE;
  }

  // 内容行边框
  .el-table__cell {
    border: 1 !important;
    border-color: #222e3b;
  }

  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table__border-left-patch {
    background-color: #263342;
  }

  //自定义斑马线和鼠标移入样式
  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
    background-color: #263343 !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
    background-color: #2F4052 !important;
  }

  .el-table__body tr:nth-child(even) {
    background-color: #263343;
    /* 偶数行（斑马线）的默认背景色 */
  }
}
</style>